<template>
    <div class="app-container">
        <div class="form-container">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                status-icon>
                <el-form-item label="品牌名称" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="品牌首字母" prop="firstLetter">
                    <el-input v-model="ruleForm.firstLetter" />
                </el-form-item>
                <el-form-item label="品牌LOGO" prop="logo">
                    <el-upload style="width: 100%;" v-model:file-list="logo" class="upload-demo" list-type="picture"
                        action="http://xue.cnkdl.cn:9082/mall-admin/minio/upload">
                        <el-button type="primary">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                只能上传jpg/png文件，且不能超过100kb
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="品牌专区大图" prop="bigPic">
                    <el-upload style="width: 100%;" v-model:file-list="bigPic" class="upload-demo" list-type="picture"
                        action="http://xue.cnkdl.cn:9082/mall-admin/">
                        <el-button type="primary">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                只能上传jpg/png文件，且不能超过100kb
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="品牌故事" prop="brandStory">
                    <el-input v-model="ruleForm.brandStory" type="textarea" placeholder="请输入内容" :row="0" />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="ruleForm.sort" />
                </el-form-item>
                <el-form-item label="是否显示">
                    <el-radio-group v-model="ruleForm.showStatus">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="品牌制造商">
                    <el-radio-group v-model="ruleForm.factoryStatus">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">
                        提交
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import * as http from '@/request/http'
import { reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, FormInstance, UploadUserFile } from 'element-plus';

const route = useRoute()
const brandId = route.query.id
//logo和专区大图
const logo = ref<UploadUserFile[]>([
    {
        name: '',
        url: ''
    }
])
const bigPic = ref<UploadUserFile[]>([{
    name: '',
    url: ''
}])

//根据id查询某个品牌
http.brand.brandInquireId(Number(brandId)).then(res => {
    console.log(res);
    Object.assign(ruleForm, res.data)
    logo.value[0].url = res.data.logo
    bigPic.value[0].url = res.data.bigPic
})
//表单验证
const ruleFormRef = ref<FormInstance>()
//品牌表单数据
const ruleForm = reactive({
    name: '',
    firstLetter: '',
    factoryStatus: 0,
    logo: '',
    bigPic: '',
    showStatus: 0,
    sort: 0,
    brandStory: '',
    id: 0
})

//排序自定义校验
const validatePass = (_rule: any, value: any, callback: any) => {
    let reg = /^\d+$/
    if (value === '' && reg.test(value)) {
        callback(new Error('排序必须为数字'))
    } else {
        callback()
    }
}
//表达校验信息
const rules = reactive({
    name: [
        { required: true, message: '请输入品牌名称', trigger: 'blur' },
    ],
    logo: [
        {
            required: true, message: '请输入品牌logo', trigger: 'blur'
        }
    ],
    sort: [{ validator: validatePass, trigger: 'blur' }],
})
//表单效验
const submitForm = () => {
    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            ElMessageBox.confirm(
                '是否提交数据',
                '提示',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    http.brand.brandUpdate(ruleForm.id, ruleForm).then(_res => {
                        ElMessage.success('修改成功')
                        // ruleFormRef.value?.resetFields()
                    })
                })

        } else {
            ElMessage.error('验证失败')
        }
    })
}


</script>

<style scoped></style>